<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        nav {
            font-size: 1.5rem;
            background-color: #21D4FD;
            background-image: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -moz-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -o-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }
        h1 {
            font-size: 2rem;
        }
        li {
            margin: 10px 20px;
        }
        body {
/*             background-image: url("../static/img/2.jpg"); */
            background-size: cover;
        }
    </style>
</head>
<body>

    <!--导航栏替换-->
    <div th:replace="~{commons/commons :: topbar(active='index.html')}"></div>

    <div class="card bg-light" style="margin: 150px 100px; width: 400px;">
        <div class="card-header">
            <h1>欢迎使用图书管理系统</h1>
        </div>
        <div class="card-body">
            <p>
                后端框架: SpringBoot <br>
                HTML模板: ThymeLeaf <br>
                持久层: Mybatis <br>
                UI: Bootstrap <br>
                登录验证和用户权限: Shiro
            </p>
        </div>
    </div>


<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>